<template>
  <div class="bg">
    <subjectType v-if="subjectTypeStr" :subjectTypeStr.sync="subjectTypeStr" :indexStr.sync="index" @getData="getData"></subjectType>
    <el-dialog
  :visible.sync="modificationTypeStr"
   width="54%"
  :before-close="handleClose">
  <modificationType :modificationTypeStr.sync="modificationTypeStr" :businessCodeStr="form.businessCode"  :indexStr.sync="index" @getData="getData"></modificationType>
</el-dialog>

    <div v-if="index" class="box-shadow formList" >
      <div style="margin-left: 11%">
        <i class="MmsUiBlockTitle___line___27lhp1-44-1"></i>
        <div class="MmsUiBlockTitle___title___2C-H-1-44-1">
          <span>申请单信息</span>
        </div>
        <div style="margin-top: 30px;margin-left: 3%;font-size: 14px;">
          <el-row :gutter="20">
            <el-col :span="7">
              <div style="display: inline-block;">
                已选主体类型 ： {{subjectType}}
              </div>
              <a v-if="BtnTypeStr" @click="modificationTypeStr=true" style="margin-left:10px;color:#1890ff;">修改</a>
            </el-col>
            <el-col :span="8">
              <div @click="cutSubjectInfo">
                创建时间 : {{form.createTime}}
              </div>
            </el-col>
            <el-col :span="8">
              <div>
                申请单号 : {{form.businessCode}}
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
      <div style="margin-left: 11%">
        <i class="MmsUiBlockTitle___line___27lhp1-44-1"></i>
        <div class="MmsUiBlockTitle___title___2C-H-1-44-1">
          <span>必填信息</span>
        </div>
      </div>
      <div style="margin-left: 16%;margin-top: 1%">
        <div class="sk-cube-grid">

          <div class="left">
            <div style="margin-left: 3%;margin-top: 3%">
              <div style="height: 385px;margin-left:1%;margin-top:69%;width: 80%">
                <el-steps direction="vertical" :active=step>
                  <el-step title="" description=""></el-step>
                  <el-step title="" description=""></el-step>
                  <el-step title="" description=""></el-step>
                  <el-step title="" description=""></el-step>
                  <el-step title="" description=""></el-step>
                </el-steps>
              </div>
            </div>
          </div>

          <div class="right">
            <el-divider></el-divider>
            <div class="item">
              <div>主体信息</div>
              <div class="content">
                请填写商家的营业执照登记证书、经营者人的证件等信息
                <span v-if="step >= 1" style="cursor: pointer" class="pointer" @click="cutSubjectInfo"> 去填写&nbsp;></span>
              </div>
            </div>
            <el-divider></el-divider>
            <div class="item">

              <div>经营信息</div>
              <div class="content">
                请填写商家的经营业务信息、售卖商品/提供服务场景信息
                <span v-if="step >= 2" style="cursor: pointer" class="pointer" @click="cutBusinessInfo()">去填写&nbsp;></span>
              </div>
            </div>
            <el-divider></el-divider>
            <div class="item">

              <div>结算规则</div>
              <div class="content">
                请填写商家的结算率规则、特殊资质等信息
                <span v-if="step >= 3" style="cursor: pointer" class="pointer" @click="cutSettlementInfo()">去填写&nbsp;></span>
              </div>
            </div>
            <el-divider></el-divider>
            <div class="item">

              <div>结算账户</div>
              <div class="content">
                请填写商家提现收款的银行账户信息
                <span v-if="step >= 4" style="cursor: pointer" class="pointer" @click="cutBankAccountInfo()">去填写&nbsp;></span>
              </div>
            </div>
            <el-divider></el-divider>
            <div class="item">

              <div>超级管理员</div>
              <div class="content">
                超級管理员需在开户后进行签约,并接收日常車要管理信息和进行资金操作,<br/>请确定其为商户法定代表人或负责人
                <span v-if="step >= 5"  style="cursor: pointer" class="pointer" @click="cutContactInfo()">去填写&nbsp;></span>
              </div>

            </div>
            <el-divider></el-divider>

          </div>
        </div>
      </div>
      <div style="margin-left: 70.5%;"><el-button type="primary" @click="submitForm()" :disabled="nextStep">提交审核</el-button></div>
      <div style="height:30px"></div>
    </div>
    <subjectInfo v-if=subjectInfo :subjectInfoStr.sync="subjectInfo" :businessCodeStr="form.businessCode" :indexStr.sync="index" @getData="getData"></subjectInfo>
    <businessInfo v-if=businessInfo :businessInfoStr.sync="businessInfo" :businessCodeStr="form.businessCode" :indexStr.sync="index" @getData="getData"></businessInfo>
    <settlementInfo v-if=settlementInfo :settlementInfoStr.sync="settlementInfo" :businessCodeStr="form.businessCode" :indexStr.sync="index" @getData="getData"></settlementInfo>
    <bankAccountInfo v-if=bankAccountInfo :bankAccountInfoStr.sync="bankAccountInfo" :businessCodeStr="form.businessCode" :indexStr.sync="index" @getData="getData"></bankAccountInfo>
    <contactInfo v-if=contactInfo :contactInfoStr.sync="contactInfo" :businessCodeStr="form.businessCode" :indexStr.sync="index" @getData="getData"></contactInfo>
    <!-- <succeed v-if=succeed :succeedStr.sync="succeed" :indexStr.sync="index" @getData="getData"></succeed> -->
  </div>

</template>

<script>
  import {getPayAudit,submitAudit} from '@/api/applet/payAudit'
  import subjectInfo from "./subjectInfo";
  import businessInfo from "./businessInfo";
  import settlementInfo from "./settlementInfo";
  import bankAccountInfo from "./bankAccountInfo";
  import contactInfo from "./contactInfo";
  import subjectType from "./SubjectType";
  import modificationType from "./ModificationType";
  import succeed from "./succeed";
  export default {
    //import 引入的组件需要注入到对象中才能使用
    components: {subjectInfo, businessInfo, settlementInfo, bankAccountInfo, contactInfo,subjectType,succeed,modificationType},
    props: {},
    data() {
      //这里存数据
      return {
        form: {},
        subjectTypeStr:false,
        modificationTypeStr:false,
        BtnTypeStr: false,
        index: true,
        subjectInfo: false,
        businessInfo: false,
        settlementInfo: false,
        bankAccountInfo: false,
        contactInfo: false,
        succeed:false,
        //商户类型
        subjectType:"",
        step:0,
        nextStep:true
      };
    },
    //计算属性
    computed: {},
    //监控data中数据变化
    watch: {},
    //方法
    methods: {
      handleClose() {
        this.modificationTypeStr = false
      },
      getData() {
        var businessCode =this.$route.query.businessCode
        getPayAudit(businessCode).then((response) => {
          if (response.data == undefined){
            this.index = false
            this.subjectTypeStr = true
            return
          }else if(response.data != undefined) {
            // this.index = false
            this.BtnTypeStr = true
          }
          this.form = response.data
          this.subjectType = response.data.subjectType == "SUBJECT_TYPE_INDIVIDUAL"?"个体户":"企业";
          this.step =Number(response.data.step);
          if ( this.step == 6){
            this.nextStep = false
          }
          // if (response.data.auditState !=0){
          //   this.index = false
          // }
        })

      },
      //提交审核
      submitForm(){
        submitAudit(this.form.businessCode).then((response) => {
          this.index = false
          this.$router.push("/store/applet/authorization");
        })
      },

      cutSubjectInfo() {

        this.subjectInfo = true
        this.index = false
        window.scrollTo(0,0);
      },
      cutBusinessInfo() {
        this.businessInfo = true
        this.index = false
        window.scrollTo(0,0);
      },
      cutSettlementInfo() {
        this.settlementInfo = true
        this.index = false
        window.scrollTo(0,0);
      },
      cutBankAccountInfo() {
        this.bankAccountInfo = true
        this.index = false
        window.scrollTo(0,0);
      },
      cutContactInfo() {
        this.contactInfo = true
        this.index = false
        window.scrollTo(0,0);
      },

    },
    //声明周期 - 创建完成（可以访问当前this实例）
    created() {
      this.getData()
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
      this.getData()
      window.scrollTo(0,0);
    },
    beforeCreate() {
    },//生命周期 - 创建之前
    beforeMount() {
    },//生命周期 - 挂载之前
    beforeUpdate() {
    },//声明周期 - 更新之前
    updated() {
    },//生命周期 - 更新之后
    beforeDestroy() {
    },//生命周期 - 销毁之前
    destroyed() {
    },//生命周期 - 销毁之后
    activated() {
    },//缓存keep-alive
  }
</script>

<style scoped>
  .el-divider--horizontal {
      margin: 20px 0;
   }
  .sk-cube-grid {
    display: flex;
  }

  .left {
    flex-basis: 3%;
    padding: 20px;
  }

  .right {
    flex-basis: 70%;
    display: flex;
    flex-direction: column;
  }

  .item {
    padding: 0 10px;
    font-weight: bold;
    /* margin-bottom: 10px; */
  }

  .content {
    font-size: 14px;
    margin-top: 10px;
    color: #B4B5BF;
    position: relative;
  }


  .MmsUiBlockTitle___line___27lhp1-44-1 {
    display: inline-block;
    background: #13ce66;
    width: 5px;
    height: 16px;
    margin-right: 8px;

  }

  .MmsUiBlockTitle___title___2C-H-1-44-1 {
    display: inline-block;
    font-size: 20px;
    color: #333;
    position: relative;
    margin-top: 30px;
  }

  .box-shadow {
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    width: 70%;
    height: 100%;
    margin: auto;
    margin-top: 2%;
    margin-bottom: 2%;
  }

  .pointer {
    position: absolute;
    right: 20px;
    bottom: 20px;
    font-weight: bold;
    color: #B4B5BF;
  }

</style>
